import React from "react";
import ClassComponent from "./class-component";
import FCComponent from "./fc-component";
export default class LearnComponentDiff extends React.Component {
  state = {
    user: "王凯",
  };

  render() {
    return (
      <div>
        <label>
          <b>选择一个人关注：</b>
          <select
            onChange={(e) =>
              this.setState({
                user: e.target.value,
              })
            }
          >
            <option value="wangkai">王凯</option>
            <option value="zhagnsan">张三</option>
            <option value="lisi">李四</option>
          </select>
        </label>
        <h1>欢迎关注 {this.state.user}</h1>
        <ClassComponent user={this.state.user}></ClassComponent>
        <FCComponent user={this.state.user}></FCComponent>
      </div>
    );
  }
}

//最终的输出值明显为"选择的王凯,,
// props会在函数执行的瞬间就被捕获,而props本身又是不可变值,
// 所以我们可以确保从当前开始读取到的 props 都是最初捕获到的。
// 当父组件传入新的 props 尝试重新渲染函数时，本质是基于新的 props 入参重新调用了一次函数，并不会影响上一次调用。
// 这就是 Dan 所说的函数式组件捕获了渲染所使用的值，并且我们还能进一步意识到：函数组件真正将数据和渲染紧紧的绑定到一起了注意：
// 很多人认为在函数组件中延迟输出的state是调用时的state,而不是最新的state是一个Bug,恰恰相反,
// 这是一个函数式组件的特性,是真正践行了React设计理念的正确方式。当然Hooks也给出了获取最新的props和state的方法,
// 就是 useRef,详细用法在我们的课程已经有所介绍，同学们可以自行回顾一下
